<template>
  <div id="cmsSite">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          <el-breadcrumb-item>站点管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" align="right">
        <el-button
          @click="handleAddCmsSite"
          size="small"
          type="success"
          icon="el-icon-circle-plus-outline"
        >添加站点</el-button>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="tableCmsSite"
          :data="tableCmsSiteData"
          border
          stripe
          fit
          highlight-current-row
          v-loading="tableCmsSiteLoading"
          max-height="1200"
        >
          <el-table-column type="index" label="序号" :index="indexMethod" width="80"></el-table-column>
          <el-table-column prop="id" label="站点ID" width="80"></el-table-column>
          <el-table-column prop="isHttps" label="Https" width="80">
            <template slot-scope="scope">{{scope.row.isHttps === true ? 'https' : 'http'}}</template>
          </el-table-column>
          <el-table-column prop="domain" label="域名" width="180"></el-table-column>
          <el-table-column prop="title" label="站点名称" width="180" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="tags" label="标签" width="320" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="siteDesc" label="描述" width="360" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="handleEditCmsSite(scope.$index, scope.row)"
                type="text"
                size="small"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 10, 20, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog
      :title="dialogCmsSiteTitle"
      :visible.sync="dialogCmsSiteVisible"
      width="900px"
      @closed="dialogCmsSiteClosed"
    >
      <el-form ref="formCmsSite" :model="modelCmsSite" status-icon :rules="rulesCmsSite">
        <el-form-item label="域名" :label-width="formCmsSiteLabelWidth" prop="domain">
          <el-input
            v-model="modelCmsSite.domain"
            autocomplete="off"
            maxlength="50"
            class="input-with-select"
          >
            <el-select v-model="modelCmsSite.isHttps" slot="prepend" placeholder="请选择是否是Https协议">
              <el-option
                v-for="option in isHttpsOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="站点名称" :label-width="formCmsSiteLabelWidth" prop="title">
          <el-input v-model="modelCmsSite.title" autocomplete="off" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formCmsSiteLabelWidth" prop="tags">
          <el-input v-model="modelCmsSite.tags" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formCmsSiteLabelWidth" prop="siteDesc">
          <el-input
            v-model="modelCmsSite.siteDesc"
            autocomplete="off"
            maxlength="300"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="Logo" :label-width="formCmsSiteLabelWidth" prop="logo">
          <el-input v-model="modelCmsSite.logo" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item label="备案信息" :label-width="formCmsSiteLabelWidth" prop="beian">
          <el-input v-model="modelCmsSite.beian" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item label="版权信息" :label-width="formCmsSiteLabelWidth" prop="copyright">
          <el-input v-model="modelCmsSite.copyright" autocomplete="off" maxlength="200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCmsSiteVisible = false">取 消</el-button>
        <el-button type="primary" :loading="isButtonLoadingCmsSite" @click="onSubmitCmsSite">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAPI } from '../assets/js/resources.js'
import { formatDate } from '../assets/js/nix.utils.js'
var Qs = require('qs')

export default {
  name: 'CmsSite',
  data() {
    var checkDomain = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('域名不能为空'))
      } else {
        callback()
      }
    }
    var checkTitle = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('站点名称不能为空'))
      } else {
        callback()
      }
    }
    return {
      page: 1,
      rows: 20,
      total: 100,
      tableCmsSiteData: [],
      tableCmsSiteLoading: false,
      dialogCmsSiteVisible: false,
      dialogCmsSiteTitle: '添加站点',
      isHttpsOptions: [
        {
          label: 'http://',
          value: false
        },
        {
          label: 'https://',
          value: true
        }
      ],
      modelCmsSite: {
        id: null,
        domain: '',
        title: '',
        tags: '',
        siteDesc: '',
        logo: '',
        isHttps: false,
        beian: '',
        copyright: ''
      },
      rulesCmsSite: {
        domain: [{ validator: checkDomain, trigger: 'blur' }],
        title: [{ validator: checkTitle, trigger: 'blur' }]
      },
      formCmsSiteLabelWidth: '80px',
      isButtonLoadingCmsSite: false
    }
  },
  methods: {
    // Table
    loadtableCmsSiteData() {
      this.tableCmsSiteLoading = true
      var that = this
      this.$axios
        .get(getAPI('API_GET_CMS_SITE_LIST'), {
          params: { page: that.page, rows: that.rows }
        })
        .then(function(response) {
          if (response.data.status === 200) {
            that.tableCmsSiteData = response.data.data.list
            that.total = response.data.data.total
            that.tableCmsSiteLoading = false
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleSizeChange(val) {
      // console.log('每页' + val + '条')
      this.rows = val
      this.loadtableCmsSiteData()
    },
    handleCurrentChange(val) {
      // console.log('当前页:' + val)
      this.page = val
      this.loadtableCmsSiteData()
    },
    handleAddCmsSite() {
      this.dialogCmsSiteTitle = '添加站点'
      this.dialogCmsSiteVisible = true
    },
    handleEditCmsSite(index, row) {
      // console.log(index, row)
      // this.$message(row.id + '');
      this.dialogCmsSiteTitle = '修改站点'
      this.dialogCmsSiteVisible = true
      this.modelCmsSite.id = row.id
      this.modelCmsSite.domain = row.domain
      this.modelCmsSite.title = row.title
      this.modelCmsSite.tags = row.tags
      this.modelCmsSite.siteDesc = row.siteDesc
      this.modelCmsSite.logo = row.logo
      this.modelCmsSite.isHttps = row.isHttps
      this.modelCmsSite.beian = row.beian
      this.modelCmsSite.copyright = row.copyright
    },
    indexMethod(index) {
      return index + 1
    },
    dateFormat(row, column, cellValue, index) {
      var date = new Date(cellValue)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    // Edit
    onSubmitCmsSite() {
      this.isButtonLoadingCmsSite = true
      this.$refs.formCmsSite.validate(valid => {
        if (valid) {
          var that = this
          this.$axios({
            method: 'post',
            url: getAPI('API_POST_CMS_SITE_SAVE'),
            data: Qs.stringify(that.modelCmsSite) // 序列化为&格式
          })
            .then(function(response) {
              if (response.data.status === 200) {
                that.$message({
                  message: '保存成功',
                  type: 'success'
                })
                that.isButtonLoadingCmsSite = false
                that.dialogCmsSiteVisible = false
                that.loadtableCmsSiteData()
              } else {
                that.$message.error(response.data.msg)
                that.isButtonLoadingCmsSite = false
              }
            })
            .catch(function(error) {
              console.log(error)
            })
        }
      })
    },
    resetForm() {
      this.modelCmsSite = {
        id: null,
        domain: '',
        title: '',
        tags: '',
        siteDesc: '',
        logo: '',
        isHttps: false,
        beian: '',
        copyright: ''
      }
      this.$refs.formCmsSite.resetFields()
    },
    dialogCmsSiteClosed() {
      this.resetForm()
    }
  },
  created() {
    this.loadtableCmsSiteData()
  }
}
</script>

<style scoped>
</style>
